<template>
	<view class="container">
		<uni-card>
			<view class="" style="display: flex;">
				<view class="">
					<view v-for="(item,index) in category" @click="sw(item,index)"
						:style="current===index?'color:#007aff':''" :key="index">
						<view class="">{{item}}</view>
						<view class="line" style="background-color: #CCCCCC;"></view>
					</view>
				</view>
				<view class="" style="flex: 1;">
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view v-for="(item,index) in service"
							style="margin-bottom: 10px;text-align: center;width: 33.33%;"
							@click="$toService(item.serviceName)" :key="index">
							<image :src="baseUrl+item.imgUrl" style="height: 50px;width: 50px;" mode=""></image>
							<view class="" style="color: #737373;font-size: 13px;margin-top: 5px;">{{item.serviceName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: [],
				service: [],
				category: ['便民服务', '生活服务', '车主服务'],
				current: -1
			};
		},
		onLoad(item) {

		},
		onReady() {
			this.get('/prod-api/api/service/list', {

			}, 1).then(res => {
				let data = res.rows
				console.log(data);
				this.total = data
				this.sw(this.category[0], 0)
			})
		},
		onShow() {

		},
		methods: {
			sw(name, index) {
				this.current = index
				this.service = this.total.filter(e => {
					return e.serviceType === name
				})
			}
		}
	};
</script>

<style lang="scss">

</style>
